<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
	<title>GraphEditor</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
	<link rel="stylesheet" type="text/css" href="customize/css/editor.css">
	<script src="customize/utils/jquery-1.8.3/jquery.js"></script>
	<script src="customize/utils/layer/layer.js"></script>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			background-color: #f8f8f9;
		}
		.geBlock {
			z-index:-3;
			margin:100px;
			margin-top:40px;
			margin-bottom:30px;
			padding:20px;
		}
		.geBlock h1,.geBlock h2{
			margin-top:0px;
			padding-top:0px;
			font-family: 黑体;
			font-weight: normal;
		}
	</style>
	<script type="text/javascript">
		// Parses URL parameters. Supported parameters are: 解析URL参数，支持的参数有：
		// - lang=xy: Specifies the language of the user interface. 指定用户界面的语言
		// - touch=1: Enables a touch-style user interface. 启用触摸式用户界面
		// - storage=local: Enables HTML5 local storage. 启用HTML5本地存储
		// - chrome=0: Chromeless mode. Chromeless 模式 ？？
		var urlParams = (function(url)
		{
			var result = new Object();
			var idx = url.lastIndexOf('?');
	
			if (idx > 0)
			{
				var params = url.substring(idx + 1).split('&');
				
				for (var i = 0; i < params.length; i++)
				{
					idx = params[i].indexOf('=');
					
					if (idx > 0)
					{
						result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
					}
				}
			}
			
			return result;
		})(window.location.href);
	
		// Default resources are included in GraphEditor resources  默认资源包含在grapheditor resources中
		// 默认情况下，mxgraph核心库同步加载两个资源文件。
		// 异步加载这些文件，就要在加载mxClient.js之前将mxLoadResources设置为false，并且用mxResources.loadResources代替mxLoadResources
		mxLoadResources = false;

    // Adds basic error handling
    window.onerror = function()
    {
      var status = document.getElementById('geStatus');

      if (status != null)
      {
        status.innerHTML = '无法加载页面,请尝试刷新。';
      }
    };
	</script>
	<script type="text/javascript" src="js/Init.js"></script>
	<script type="text/javascript" src="deflate/pako.min.js"></script>
	<script type="text/javascript" src="deflate/base64.js"></script>
	<script type="text/javascript" src="jscolor/jscolor.js"></script>
	<script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
	<script type="text/javascript" src="../src/js/mxClient.js"></script>
	<script type="text/javascript" src="js/EditorUi.js"></script>
	<script type="text/javascript" src="js/Editor.js"></script>
	<script type="text/javascript" src="js/Sidebar.js"></script>
	<script type="text/javascript" src="js/Graph.js"></script>
	<script type="text/javascript" src="js/Format.js"></script>
	<script type="text/javascript" src="js/Shapes.js"></script>
	<script type="text/javascript" src="js/Actions.js"></script>
	<script type="text/javascript" src="js/Menus.js"></script>
	<script type="text/javascript" src="js/Toolbar.js"></script>
	<script type="text/javascript" src="js/Dialogs.js"></script>
</head>
<body class="geEditor">
	<div id="geInfo">
  <div class="geBlock" style="text-align:center;min-width:50%;">
		<h1>组态编辑器</h1>
    <h2 id="geStatus">正在加载，请稍后...</h2>
  </div>
</div>
	<script type="text/javascript">
		// Extends EditorUi to update I/O action states based on availability of backend  继承EditorUi以根据后端的可用性更新I / O操作状态
		setTimeout(function()
    {
      var editorUiInit = EditorUi.prototype.init;

      EditorUi.prototype.init = function()
      {
        editorUiInit.apply(this, arguments);
        this.actions.get('export').setEnabled(false);

        // Updates action states which require a backend  更新需要后端的操作状态
        if (!Editor.useLocalStorage)
        {
          mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
          {
            var enabled = req.getStatus() != 404;
            this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
            this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
            this.actions.get('save').setEnabled(enabled);
            this.actions.get('saveAs').setEnabled(enabled);
            this.actions.get('export').setEnabled(enabled);
          }));
        }
      };

      // Adds required resources (disables loading of fallback properties, this can only
      // be used if we know that all keys are defined in the language specific file)
      // 添加所需的资源(禁用默认的文件加载方法，仅当我们知道所有的键都在指定的语言文件中定义时，才能使用)
      mxResources.loadDefaultBundle = false;
      // 获取要加载的语言包的路径 resources/grapheditor_zh.txt
      var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
        mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

      // Fixes possible asynchronous requests  异步加载给定的数组中的url,并且调用特定函数，回调函数中的xhr是一个mxXmlRequest对象数组
      // getAll: function(	urls,onload,onerror	)
      mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
      {
        // Adds bundle text to resources
        // xhr[0].getText() 将响应作为一个字符串返回
        // 解析响应字符串中的键值对，并且将它们存储为本地资源
        mxResources.parse(xhr[0].getText());
        // Configures the default graph theme  配置默认图形主题，返回响应XML文档的document元素。
        var themes = new Object();
        themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
        // Main  入口函数
        new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
      }, function()
      {
        document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
      });
			document.getElementById('geInfo').style.display = 'none'
    },1000);
	</script>
</body>
</html>
